<template>
  <div class="count">
    <h2>当前的和为：{{ sum }}</h2>
    <h2>十倍和为：{{ bigSum }}</h2>
    <h2>人员总数为{{ persons.length }}</h2>
    <div>
      <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="increment(n)">+</button>
      <button @click="decrement(n)">-</button>
      <button @click="incrementOdd(n)">当前为奇数+</button>
      <button @click="incrementWait(n)">延迟500ms+</button>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      n: 1,
    };
  },
  methods: {
    // increment() {
    //   this.$store.commit("increment", this.n);
    // },
    // decrement() {
    //   this.$store.commit("decrement", this.n);
    // },
    // incrementOdd() {
    //   this.$store.dispatch("incrementOdd", this.n);
    // },
    // incrementWait() {
    //   this.$store.dispatch("incrementWait", this.n);
    // },

    // 传入对象形式
    // ...mapActions({
    //   incrementOdd: "incrementOdd",
    //   incrementWait: "incrementWait",
    // }),
    // 传入数组形式
    ...mapActions(["incrementOdd", "incrementWait"]),

    // 传入对象形式
    // ...mapMutations({ increment: "increment", decrement: "decrement" }),
    // 传入数组形式
    ...mapMutations(["increment", "decrement"]),
  },
  computed: {
    // sum() {
    //   return this.$store.state.sum;
    // },

    // 传入对象形式
    // ...mapState({ sum: "sum" }),
    // 传入数组形式
    ...mapState(["sum", "persons"]),

    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },

    // 传入对象形式
    // ...mapGetters({ bigSum: "bigSum" }),
    // 传入数组形式
    ...mapGetters(["bigSum"]),
  },
  mounted() {
    console.log(this.$store);
  },
};
</script>

<style scoped></style>
